<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/odoo-wechat/static/src/js/vue.js"></script>
    <link rel="stylesheet" href="/odoo-wechat/static/src/css/index.css">
    <link rel="stylesheet" href="/odoo-wechat/static/src/css/bug.css">
    <script src="/odoo-wechat/static/src/js/index.js"></script>
    <link rel="stylesheet" href="/odoo-wechat/static/src/layui/css/layui.css" media="all">
    <title>Document</title>
</head>
<body>
<div v-cloak id="app">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-row>
            <el-col :span="8">
                <el-form-item label="客户" prop="customer" style="display: inline;">
                    <el-input disabled v-model="ruleForm.customer"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="缺陷程度" prop="xz_degree_defect">
                    <el-select v-model="ruleForm.xz_degree_defect" placeholder="请选择">
                        <el-option
                                label="阻塞"
                                value="blocking">
                        </el-option>
                        <el-option
                                label="严重"
                                value="serious">
                        </el-option>
                        <el-option
                                label="普通"
                                value="ordinary">
                        </el-option>
                        <el-option
                                label="不重要"
                                value="not_important">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="缺陷类型" prop="xz_defect_type">
                    <el-select v-model="ruleForm.xz_defect_type" placeholder="请选择">
                        <el-option
                                label="线上问题"
                                value="online_problem">
                        </el-option>
                        <el-option
                                label="需求问题"
                                value="demand_problem">
                        </el-option>
                        <el-option
                                label="功能缺陷"
                                value="functional_defect">
                        </el-option>
                        <el-option
                                label="性能瓶颈"
                                value="performance_bottleneck">
                        </el-option>
                        <el-option
                                label="反馈意见"
                                value="feedback">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>

        <textarea class="layui-textarea" id="LAY_demo1">{{ruleForm.xz_defect_problem}}</textarea>
        <div class="text">
            <el-form-item>
                <el-button class="site-demo-layedit" type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </div>

    </el-form>
</div>

<script src="/odoo-wechat/static/src/layui/layui.js" charset="utf-8"></script>
<script src="/odoo-wechat/static/src/js/jquery.min.js" charset="utf-8"></script>


<script>

    const app = new Vue({
        el: '#app',
        data: {
            ruleForm: {
                xz_customer: '',
                xz_defect_problem: '',
                customer: '',
                xz_degree_defect: '',
                xz_defect_type: '',
            },
            da: '',
            index: 1,
            rules: {
                customer: [
                    {required: true, message: '请输入活动名称', trigger: 'blur'},
                ],
                xz_degree_defect: [
                    {required: true, message: '请选择缺陷程度', trigger: 'blur'},
                ],
                xz_defect_type: [
                    {required: true, message: '请选择缺陷类型', trigger: 'blur'},
                ]
            }
        },
        created() {
            console.log("this");
            console.log(this);
            url = '/bug_submit/data';
            fetch(url).then(resp => resp.json()).then(json => {
                console.log(json.data.customer);
                this.ruleForm.customer = json.data.customer;
                this.ruleForm.xz_customer = json.data.customer_id;
            });
        },

        methods: {
            submitForm(formName) {
                //编辑器外部操作
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        app.ruleForm.xz_defect_problem = this.da.layedit.getContent(this.index); //获取编辑器内容
                        let datas = JSON.stringify(app.ruleForm);
                        $.ajax({
                            type: 'POST',
                            url: '/bug_submit/submit',
                            data: {'data': datas},
                            success: function (resp) {
                                parent.location = '/xz-thank-you'
                            },
                        });
                        let data = JSON.stringify(this.ruleForm);
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.ruleForm.defect_level = '';
                this.ruleForm.value2 = '';
            },
        },
    })
</script>

<script>
    var da = layui.use('layedit', function () {
        var layedit = layui.layedit
            , $ = layui.jquery;
        //构建一个默认的编辑器
        var index = layedit.build('LAY_demo1');
        //自定义工具栏
        layedit.build('LAY_demo2', {
            tool: ['face', 'link', 'unlink', '|', 'left', 'center', 'right']
            , height: 100
        })
    });
    app.da = da;

</script>
</body>
</html>
